<template>
  <view 
  @touchstart="handlerTouchstart" 
  @touchend="handlerTouchend"
    >学习触屏时间</view
  >
</template>

<script>
/**
 * 1、给容器绑定两个触屏事件
 * 2、用户按下屏幕的时间
 *  1、记录下用户按下屏幕的时间 Date.now() 返回1970-1-1到现在的毫秒数
 *  2、记录下用户按下屏幕的坐标X和Y
 * 3、用户离开屏幕的事件
 *   1、记录用户离开屏幕的时间
 *   2、记录下用户离开屏幕的坐标x和y
 *   3、根据连个时间运算判断用户按下屏幕的时长是否合法
 *   4、根据两对坐标判断距离是否合法 判断滑动的方向
 *
 */
export default {
  data() {
    return {
      // 按下的时间
      startTime: 0,

      // 按下的坐标
      startX: 0,
      startY: 0,
    };
  },

  methods: {
    handlerTouchstart(event) {
    //   console.log("开始触屏" + JSON.stringify(event));
      console.log("开始触屏X" + event.changedTouches[0].clientX);
      console.log("开始触屏Y" + event.changedTouches[0].clientY);
      this.startTime = Date.now();
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    handlerTouchend(event) {
    //   console.log("结束触屏" + JSON.stringify(event));

      console.log("结束触屏X" + event.changedTouches[0].clientX);
      console.log("结束触屏Y" + event.changedTouches[0].clientY);
      const endTime = Date.now();
      const endX = event.changedTouches[0].clientX;
      const endY = event.changedTouches[0].clientY;
      // 如果时长超过两秒，不处理
      if(endTime-this.startTime>2000){
          return;
      }
      // 滑动的方向
      let direction = "";

      // 判断距离 先判断用户的滑动距离
      if(Math.abs(endX-this.startX) >10 ){
          // 滑动的方向
          if(endX-this.startX>0){
              direction = "right";

          }else{
              direction = "left";
          }

      }
      console.log(direction);

    },
  },
};
</script>

<style>
view {
  width: 100%;
  height: 50vh;
  background-color: aqua;
}
</style>
